<template>
    <div class="flex flex-col flex-1 p-2">
        <div class="flex justify-between">
            <div class="flex-1"></div>
            <div>
                <el-button type="primary" @click="openDialog">新增</el-button>
            </div>
        </div>
        <CustomTable
            class="mt-2"
            :data="tableData"
            :total="tableTotal"
        >
            <el-table-column type="index" width="60" label="序号" />
            <el-table-column prop="tenantName" label="社区名" />
            <el-table-column label="操作">
                <template #default="{ row }">
                    <el-button text type="primary" @click="openUserDialog(row)">人员</el-button>
                </template>
            </el-table-column>
        </CustomTable>
    </div>
    <CustomDialog v-model:show="userDialog" title="用户列表" width="700px" @cancel="cancelDialog" @confirm="submitForm">
        <CustomTable
            class="mt-2"
            :data="userListData"
            :total="userTotal"
            v-model:page-size="pageSize"
            @pageSize="getUserList"
            v-model:currentPage="pageNum"
            @currentPage="getUserList"
        >
            <el-table-column type="index" width="60" label="序号" />
            <el-table-column prop="username" label="用户名" />
            <el-table-column prop="name" label="姓名" />
            <el-table-column prop="mobile" label="手机号码	" />
            <el-table-column prop="headUrl" label="头像">
                <template #default="{ row }">
                    <el-image style="width: 100px; height: 100px" :src="row.headUrl" fit="cover" />
                </template>
            </el-table-column>
            <el-table-column prop="roleCode" label="角色" />
            <el-table-column label="操作">
                <template #default="{ row }">
                    <el-button text type="danger" @click="removeUser(row)">踢出</el-button>
                </template>
            </el-table-column>
        </CustomTable>
    </CustomDialog>
</template>

<script setup lang="ts">
import CustomTable from '@/components/CustomTable.vue'
import { onMounted, reactive, ref } from 'vue'
import { addUser } from '@/apis/system'
import { getTenantUserList, getTenantList } from '@/apis/tenant'
import CustomDialog from '@/components/CustomDialog.vue'
import SingleUpload from '@/components/SingleUpload.vue'
const tableData = ref([])
const tableTotal = ref(0)


const getList = async () => {
    const res = await getTenantList()
    console.log(res)
    tableData.value = res
}
const addDialog = ref()
const openDialog = () => {
    addDialog.value = true
}
const cancelDialog = () => {
    addDialog.value = false
}
const submitForm = async () => {
    await addUser(userForm)
    addDialog.value = false
    getList()
}

const userForm = reactive({
    username: '',
    password: '',
    name: '',
    mobile: '',
    headUrl: '',
    roleCode: '',
    tenantId: null
})
const roleCodeList = ref([
    {
        code: 'ADMIN',
        name: '管理员'
    },
    {
        code: 'LEADER',
        name: '团长'
    },
    {
        code: 'CONSUMER',
        name: '顾客'
    },
    {
        code: 'FARMER',
        name: '农民'
    }
])
const tenantList = ref([])
const getTenants = async () => {
    const res = await getTenantList()
    tenantList.value = res
}
const removeUser = (row) => {}
const userDialog = ref(false)
const currentGroup = ref()
const openUserDialog = (row) => {
    currentGroup.value = row
    userDialog.value = true
    getUserList()
}
const userListData = ref([])
const userTotal = ref(0)
const pageSize = ref(10)
const pageNum = ref(1)
const getUserList = async () => {
  const res = await getTenantUserList({
    pageNum: pageNum.value,
    pageSize: pageSize.value
  })
  userListData.value = res.list
  userTotal.value = res.total
}

onMounted(() => {
    getList()
    getTenants()
})
</script>

<style scoped></style>
